<template>
	<view>
		<div class="form">
			<div class="list">
				<span class="left">昵称</span>
				<span class="right">
					<input type="text" v-model="userInfo.nickname" placeholder="请输入昵称" />
				</span>
			</div>
			<div class="list">
				<span class="left">手机号码</span>
				<span class="right">
					<input type="text" v-model="userInfo.mobile" placeholder="请输入手机号码" />
				</span>
			</div>
		</div>
		<div class="input" @click="submit">
			<button>保存</button>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{},
			}
		},
		methods: {
			submit(){
				this.$post('user/updateinfo',this.userInfo,(res)=>{
					uni.showToast({
						title:"提交成功！",
					})
					 uni.switchTab({
					 	url:"/pages/my/my"
					 });
					
				})
			},
			getDetail(){
				this.$post('user/info',{},(res)=>{
					this.userInfo = res;
				})
			}
		},
		onLoad(option) {
			this.getDetail()
		},
		onShow() {
			
		}
	}
</script>

<style>


	.form {
		font-size: 30rpx;
		margin: 0 auto;
		color: #333;
		background-color: #FFFFFF;
		padding: 0 40rpx;
	}

	.form .list {
		padding: 30rpx 0;
		border-bottom: 1px solid #e5e5e5;
		font-size: 30rpx;
		display: flex;
	}

	.form .list:last-child {
		border: none;
	}

	.form .list::after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}

	.form .list .left {
		width: 200rpx;
	}

	.form .list .right {
		flex: 1;
	}

	.form .list .right input {
		text-align: right;
	}

	.form .list .right image {
		width: 200rpx;
	}

	.input {
		margin: 0 auto;
		width: 630rpx;
		margin-top: 80rpx;
	}

	.input button {
		color: #FFFFFF;
		font-size: 34rpx;
		text-align: center;
		height: 98rpx;
		line-height: 98rpx;
		background: #22BF8A;
		border-radius: 8px;
	}

	.card_01 {
		float: right;
	}

	.card_01 image {
		width: 200rpx;
		height: 200rpx;
	}
</style>
